<template>
  <div>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="公告标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            class="neirong"
            rows="6"
            type="textarea"
            v-model="form.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片选择">
          <el-upload
            action="#"
            :http-request="uploadFile"
            :auto-upload="false"
            :limit="1"
            :on-change="uploadFile"
            :on-exceed="handleExceed"
            list-type="picture-card"
            :on-remove="uploadFile"
            :on-preview="handlePictureCardPreview"
            :multiple="true"
            accept=".png,.jpg,.jpeg,.gif,.webp"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item class="item">
          <el-button type="primary" @click="onSubmit">发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      imageName: [], //图片名称
      // 标题 内容
      form: {
        title: "",
        // 内容
        content: "",
      },
        imageList: [], //图片数据列表,用于之后上传到后端
        imgs : [],  // 提交到后台的图片文件
      
      
    };
  },
  methods: {
    // 图片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // change改变的时候 删除都绑定在一块
    uploadFile(file, fileList) {
      this.imageList = fileList;
      console.log(fileList);
    },
    // 发布
    onSubmit() {
      // 获取登录的用户信息id
      const users = JSON.parse(sessionStorage.getItem("user"));
      const userId = users.data.uid;
        
        // 循环拿到数组信息
        this.imageList.forEach((item,inxex)=>{
          // item.raw文件对象
          this.imgs = item.raw;
        })
      
      this.$axios({
        method: "post",
        url: "/notice/uplod",
        //
        headers: {
          "Content-Type": "multipart/form-data; charset=utf-8",
        },
        data: {
         noticeTitle:this.form.title,
         noticeContent:this.form.content,
         userId:userId,
         multipartFile :  this.imgs
        },
      }).then((res) => {});
    },
    // 限制图片数量
    handleExceed(file, fileList) {
      this.$message.error("最多只能添加1张图片");
      return;
    },
  },
};
</script>
<style scoped>
.item {
  margin-left: 400px;
}
.neirong {
  height: 200px;
}
#file {
  margin-left: 80px;
}
</style>